<template>

  <div class="refine_icreategroup">
    <h2 class="titleblue">创建群组</h2>
    <div class="contant">
      <el-form :model="ruleForm" ref="ruleForm" label-width="100px">
        <el-row :gutter="24">
          <el-form-item label="群组名称" prop="name" class="group-name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
        </el-row>
        <el-row :gutter="24">
          <el-form-item label="添加群成员">
            <data-tree title="内部通讯录发送" ref="memberList" :groupData="groupArray"></data-tree>
          </el-form-item>
        </el-row>
        <el-row :gutter="24">
          <el-form-item class="footerbtn">
            <el-button type="primary" @click="doCreate" class="sure">添加</el-button>
            <el-button class="cancel" @click="doCancel">取消</el-button>
          </el-form-item>
        </el-row>
      </el-form>

    </div>
  </div>

</template>

<script>
  import groupService from '@/services/GroupService.js'
  import contactService from '@/services/ContactService.js'
  import DataTree from "@/components/common/DataTree.vue"

  export default {
    props: ['insideGroup'],
    components:{
      'data-tree': DataTree
    },
    data:function () {
      return {
        ruleForm:{
          name:'',

        },
        groupArray:[],
        contactArray: []
      };
    },
    async created() {
      let allContact = await contactService.search('insideGroup==' + (this.insideGroup ? 'true' : 'false'))
      groupService.search('insideGroup==' + (this.insideGroup ? 'true' : 'false')).then(data => {
        let groupData = []
        groupData.push({
          name: '全部',
          id: 0,
          users: allContact.map(c => {return {name: c.name, id: c.id}})
        })
        data.forEach(group => {
          groupData.push({
            name: group.name,
            id: group.id,
            users: group.contacts.map(c => {return {name: c.name, id: c.id}})
          })
        })
        this.groupArray = groupData
      })

    },
    methods: {

      doCreate(){
        if(this.ruleForm.name.length==0){
          this.$alert('请填写群组名称');
          return false;
        }

        let entity = {
          name: this.ruleForm.name,
          createUserId: this.$profile.id,
          createUserName: this.$profile.fullname,
          insideGroup: !!this.insideGroup,
          contacts: this.$refs.memberList.members.map(m => ({id: m.id}))
        }
        entity.contactCount = entity.contacts.length;
        groupService.create(entity).then(() => {
          this.$alert('添加成功', {
            callback: action => {
              this.ruleForm.name = ''
              this.$emit("refresh");
            }
          });
        })
      },
      doCancel(){
        this.ruleForm.name = ''
        this.$emit("close");
      },
    }
  };
</script>

<style lang="scss">

  .refine_icreategroup {
    width:100%;
    display: inline-block;

    .group-name input{
      width: 310px;
    }
    .el-row{
      margin-left:0 !important;
      margin-right:0 !important;
    }
    .tree{
      height: 321px;
      border-radius: 2px;
      border: solid 1px #dddddd;
      padding-top:15px;
      box-sizing: border-box;
    }
    .el-tree{
      height:244px;
    }
    .footerbtn{
      text-align: center;
      margin:30px 0 50px 0;
      width:100%;
    }
    .footerbtn .el-form-item__content{
      margin-left:0 !important;
    }
  }

</style>
